Housing Options Scotland

Row library, version 1

The saved rows every page is built from

Six row types cover both designed pages. Build each one once in Beaver Builder, save it to the library, and every other page becomes content entry rather than layout work. Add new rows to the end of this page as they come up.

Each row below is the real markup from the live designs, shown edge to edge exactly as it behaves on the page. The build notes tell you which Beaver Builder settings produce it.

Set these globally before building any row

If these are in place first, most rows need no module-level styling at all, and nothing drifts as the site grows.

Saved coloursAll twelve brand values plus the four neutrals. Nobody should ever type a hex code into a module.
Global typographyBarlow, and h1 to h4 plus body and small set as desktop, tablet and mobile triplets. Modules then inherit.
Global buttonsPill, 48px minimum height, 19px label at 600. Primary #b14325, secondary #284947.
Row defaults96px top and bottom padding, 56px on mobile. 20px column gutters. Background is white or #faf8f6, nothing else.
Focus ringOne stylesheet rule for the whole site. 3px of background colour, then 3px of #284947. Never removed.
Image crops3:2 for cards, 4:3 for split rows, uncropped for heroes. Crop on upload, not in the module.
R01

Bleed hero

Homepage, tour landing page
RowFull width, full width content. No padding. Background #f15a29.
ColumnsTwo, equal. Right column takes the photo as its background, or an image module set to fill.
ModulesHeading, text, two buttons in a button group, one text line.
Custom CSSLeft column padding-left of max(32px, calc(50vw - 568px)) so the heading lines up with contained rows below. One line.
WatchSecondary button must be filled tint, never outlined white. White text cannot sit on core red below 24px.

Helping people make informed decisions about their housing

Free, expert housing advice across the whole of Scotland.

An older woman with a walking stick at her garden gate, smiling, with a young man standing by her front door
R02

Card grid

Triage, services, news. Three card types, one row.
RowContent width. Intro heading and text above, then a nested row of columns.
ColumnsThree or four, equal, 20px gutters. Equalise heights on.
CardOne HTML or callout module per column. 1px #ece9e6 border, 12px radius, 28px padding, shadow on hover only.
Custom CSSOne utility class to bottom-align the link: card is display:flex;flex-direction:column, link gets margin-top:auto. Four lines, and it is what makes the grid look composed.
WatchWhole card is the link. Metadata tags are 15px square-cornered labels, never pills, so they cannot be mistaken for buttons.

Variant A, icon card. Signposting by audience.

I need housing help Buying, renting, adapting your home, sheltered housing, or facing homelessness. Start here → I am helping someone else A relative, a friend, or someone you care for. You can get in touch on their behalf. Start here → I am a professional Refer a client to us, or find out about training, consultancy and research. Both routes →

Variant B, image card. Services and anything with a photo.

An older man sitting at the table in his living room, smiling, with a brass instrument and a Billie Holiday poster behind him Free one to one housing advice Our main service, for anyone who needs help working out their housing options. Housing options brokerage → A young man in a wheelchair working at a laptop at his dining table Moving into a place of your own Support for young disabled people planning independent living, at their own pace. Making Moves → A man standing outside his bungalow with his arms folded, smiling Housing advice for the Armed Forces community For veterans, serving personnel and their families, wherever you are in Scotland. Military Matters →

Variant C, news card. Adds a category label and a date.

Three people smiling together at a table at a Housing Options Scotland event, one of them a wheelchair user Event14 July 2026 We are taking the team to five Scottish cities this autumn Read more → An older woman with a walking stick at her garden gate, smiling, with a young man standing by her front door Client story2 July 2026 Margaret stayed in the street she grew up in, with a ramp to her door Read more → A woman standing in the open back door of her flat holding a mug, with her cat behind her Research20 June 2026 Leading Scotland's national adaptation strategy with Stirling University Read more →
R03

Split text and media

What we do, featured story, get help strip
RowContent width, 96px padding, background white or #faf8f6.
ColumnsTwo, vertically centred. Roughly 55/45. Media can be either side, and alternating it down a long page is what stops the page feeling like a list.
ModulesHeading, one or two text blocks, optional link or button. Image module, 4:3, 12px radius.
Custom CSSNone. This is the one row that needs nothing beyond the globals.
WatchText column caps at 66 characters. On mobile the media always goes above the text, never below.

One of our brokers will work through it with you

They will help you understand what your options actually are, and stay with you while you go after them. That might mean explaining a shared equity scheme, chasing an adaptation grant, filling in a housing application together, or ringing your council on your behalf.

What we will not do is hand you a leaflet and wish you luck.

Read more about how we can help →

A woman standing in the open back door of her flat holding a mug, with her cat behind her
R04

Panel call to action

Two colourways, three uses
RowDark version is full width with #284947 background. Tint version is a contained panel with 12px radius.
ColumnsTwo, vertically centred. Text left, buttons right. Buttons drop below the text on mobile.
Which oneDark closes a page and carries the main action. Tint signposts sideways to a different audience mid-page. One dark panel per page, at the bottom.
Custom CSSNone. Buttons need the inverted focus ring, which lives in the global stylesheet.
WatchOn dark, buttons are white fill or white outline. On the tint, secondary is #284947 fill.

Tint version. Mid-page signpost.

Do you work in housing, health or the third sector?

Supporting the sector covers consultancy, training and events, and research, policy and strategy. To talk either through, email Ben. Referring someone goes through Get help.

Email Ben

Dark version. Closes the page.

Talk to us about your housing

You do not need to know what you want yet. Tell us roughly what is going on, and we will take it from there.

In an emergency, please call 999 rather than using our form.

R05

Impact panel

Numbers and a voice together
RowContent width. Heading above, then a nested row with #faf8f6 background and 12px radius.
ColumnsTwo: a grid of two or three figures on the left, one client quote in a white card on the right. They stack on mobile.
ModulesOne text module per figure. Number at 56px bold in #b14325, sentence below at 18px.
Custom CSSfont-variant-numeric:tabular-nums on the figures so they align. One line.
WatchEvery figure gets a full sentence, not a bare label. Figures come from the global stat values, updated once a year. The quote changes on load only, never on a timer, and only cleared survey quotes go in.

The difference we make

2,000+ People we helped in 2025 to 2026, right across Scotland.
31 of 32 Local authorities where we support clients across Scotland.
I felt listened to for the first time in two years.
A client, from our anonymous client survey

Quote is a placeholder until the cleared survey quotes arrive.

R06

Date card

Tour dates, events, anything with a time and a place
RowContent width. Save it once, then clone per date and edit the text. Five clones on the tour page.
ColumnsTwo, roughly 35/65. Left column gets the #faf8f6 background and its own padding. Row has a 1px border, 12px radius, overflow hidden so the tint meets the edge.
ModulesLeft: three text modules. Right: two session lines and a button.
Custom CSSButton gets margin-top:auto and a 220px minimum width, so buttons align down the stack whatever the address length.
WatchTimes use a 16px colour swatch and bold text, never a pill. Warm swatch is the public session, cool is the professional one, and that pairing never swaps.
Stop one

Dundee

Wednesday 30 September

Dundee Rep
Tay Square, Dundee, DD1 1PB

10am to 12.30pm For anyone looking for housing advice
1.30pm to 4pm For housing and third sector colleagues
Book Dundee
Stop two

Aberdeen

Thursday 1 October

Aberdeen Science Centre
179 Constitution Street, Aberdeen, AB24 5TU

10am to 12.30pm For anyone looking for housing advice
1.30pm to 4pm For housing and third sector colleagues
Book Aberdeen

Rows to add next

These exist in the designs but are small enough that they have not earned a saved row yet. Add them here as they get built, keeping the R number sequence going.

R07 Announcement stripTinted full-width bar, centred text with a link. On the homepage now.
R08 Newsletter panelBordered panel, text left, single field and button right.
R09 Step sequenceThe numbered "what happens when you contact us" list. Due with the service page.
R10 AccordionIn the design system, not yet used on a page. Due with the service and inner page templates.